<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:replace="include/css"/>
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <link rel="stylesheet" href="/static/css/shuoshuo.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/userhome.css">
    <link rel="stylesheet" type="text/css" href="/static/css/userfullhome.css" th:if="${user?.userPage==1}">
    <style type="text/css">
        .page {
            text-align: center;
            padding-top: 20px;
            background-color: #fff;
            padding-right: 20px;
        }
    </style>
    <th:block th:replace="include/top"/>
    <title th:text="${user.userName}+'的博客'"></title>
</head>
<body style="background-color: #fff;">
<th:block th:replace="include/header:: header"/>
<div class="main">
    <div class="user-center-bg" th:style="'background-color:#42332E;background-image: url(/static/images/'+${user.userBg}+')'">
        <div class="user-home-icon"><img class="img-circle" th:src="'/static/images/'+${user.userIcon}"></div>
        <div class="user-characters" th:text="${#strings.defaultString(user.characters,'这个人很懒，什么也没留下。')}"></div>
    </div>

    <div class="left">
        <div class="user-home-user-name" th:text="${user.userName}"></div>
        <div class="user-home-op-btn">
          <!--  <th:block th:if="${focusType==0}">
                <a href="/admin" class="btn btn-sm btn-info">后台管理</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="/admin/preAddBlog" class="btn btn-sm btn-info">写写博客</a>
            </th:block>-->
            <a href="javascript:;" focustype="1" id="focus-btn" class="btn  btn-success" th:if="${focusType==1}">关注</a>
            <a href="javascript:;" focustype="1" id="focus-btn" class="btn  btn-warning"
               th:if="${focusType==2}">取消关注</a>
        </div>
        <div class="user-home-friend">
            <span id="left-fans-count" th:text="${fansCount}">0</span>粉丝&nbsp;&nbsp;/&nbsp;&nbsp;<span
                id="left-focus-count" th:text="${focusCount}">0</span>关注
        </div>
        <div class="blog-tit">博客分类</div>
        <div class="blog-category">
            <ul>
                <!--<#assign blogCountTotal=0>
                <#list categoryList as item>
                    <#assign blogCountTotal=blogCountTotal+item.blogCount>
                </#list>-->
                <li>
                    <a th:href="'/blog/'+${user.userId}" class="active">全部博客(<span class="blog-count"><th:block
                            th:text="${#aggregates.sum(categoryList.![blogCount])}"/></span>)</a>
                </li>
                <!--<#list categoryList as item>-->
                <li th:each="item:${categoryList}">
                    <a th:href="'/blog/'+${user.userId}+'?categoryId='+${item.categoryId}">
                        <th:block th:text="${item.name}"/>
                        (<span class="blog-count"><th:block th:text="${item.blogCount}"/></span>)</a>
                </li>
                <!--</#list>-->
                <div class="clear"></div>
            </ul>
        </div>
    </div>

    <script>
        $(function () {
            $("#focus-btn").click(function () {
                if (fzqblog.userId == "") {
                    fzqblog.goLogin();
                    return;
                }
                var focusType = $(this).attr("focusType");
                var url = "";
                if (focusType == "1") {//关注
                    url = "/friend/focus";
                } else if (focusType == "2") {
                    url = "/friend/cancel/focus";
                }
                var that = $(this);

                $.ajax({
                    url: '',
                    type: 'POST',
                    dataType: 'json',
                    data: {friendUserId: fzqblog.center.userId},
                    success: function (res) {
                        if (focusType == "1") {
                            that.attr("focusType", 2);
                            that.html("取消关注");
                            that.removeClass('btn-success');
                            that.addClass('btn-warning');
                            $("#left-fans-count").text(parseInt($("#left-fans-count").text()) + 1);
                        } else if (focusType == "2") {
                            that.attr("focusType", 1);
                            that.removeClass('btn-warning');
                            that.addClass('btn-success');
                            that.html("&nbsp;&nbsp;关&nbsp;&nbsp;&nbsp;&nbsp;注&nbsp;&nbsp;");
                            $("#left-fans-count").text(parseInt($("#left-fans-count").text()) - 1);
                        }
                    }

                });
            });
        })
    </script>
    <div class="right">
        <div class="user-home-tag">
            <ul class="tag" id="tag">
                <li type="shuoshuo"><a th:href="'/user/'+${user.userId}">吐槽</a></li>
                <li type="topic"><a th:href="'/user/'+${user.userId}+'#topic'">讨论</a></li>
                <li type="ask"><a th:href="'/user/'+${user.userId}+'#ask'">问答</a></li>
                <li type="knowledge"><a th:href="'/user/'+${user.userId}+'#knowledge'">知识库</a></li>
                <li type="blog" class="active" style="border-bottom: 1px solid #fff;"><a
                        th:href="'/blog/'+${user.userId}">博客</a>
                </li>
                <li type="fans"><a th:href="'/user/'+${user.userId}+'#fans'">Ta的粉丝</a></li>
                <li type="focus"><a th:href="'/user/'+${user.userId}+'#focus'">Ta关注的人</a></li>
            </ul>
            <div class="topic-item-list">
                <div class="topic-item" th:each="item,i:${result.list}" th:if="${result.page.pageTotal>0}">
                    <div class="topic-item-info">
                        <div class="topic-item-title">
                            <a th:href="'/blog/detail/'+${item.blogId}" class="title" target="_blank"
                               th:text="${item.title}"></a>
                            <span class="time"
                                  th:text="${#temporals.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                            <a class="topic-cate-tag" th:if="${#strings.isEmpty(item.name)}"
                               th:href="'/blog/'+${item.userId}"><span>全部分类</span></a>
                            <a class="topic-cate-tag" th:unless="${#strings.isEmpty(item.name)}"
                               th:href="'/blog/'+${item.userId}+'?categoryId='+${item.categoryId}"><span
                                    th:text="${item.name}"></span></a>
                        </div>
                        <div class="topic-item-summary" th:text="${item.summary}"></div>
                        <div class="image-thum topic-item-images"
                             th:if="${!#lists.isEmpty(item.blogImageArray)&&#lists.size(item.blogImageArray)>0}">
                            <a class="showImage" href="javascript:;" th:each="img,l:${item.blogImageArray}"
                               th:if="${l.index<=2}"><img class="img-thumbnail" th:src="${img}"/></a>
                            <div class="clear"></div>
                        </div>
                        <div class="topic-count-info">
                            <span class="count"><i class="icon icon-read"></i><span
                                    th:text="'阅读：'+${item.readCount}"></span></span>
                            <span class="count"><i class="icon icon-comment"></i><span
                                    th:text="'评论：'+${item.commentCount}"></span></span>
                            <span class="count"><i class="icon icon-like"></i><span
                                    th:text="'喜欢：'+ ${item.likeCount}"></span></span>
                            <span class="count"><i class="icon icon-collection"></i><span
                                    th:text="'收藏：'+${item.collectionCount}"></span></span>
                        </div>
                    </div>
                </div>
                <div class="no-data" th:unless="${result.page.pageTotal>0}">该分类下没有帖子</div>
                <div class="clear"></div>
            </div>
            <div id="page" class="page"></div>
        </div>
    </div>

    <div class="clear"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            laypage({
                cont: 'page',
                pages: fzqblog.pageTotal, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
                skin: 'molv', //皮肤
                curr: function () { //通过url获取当前页，也可以同上（pages）方式获取
                    var page = location.search.match(/pageNum=(\d+)/);
                    return page ? page[1] : 1;
                }(),
                jump: function (e, first) { //触发分页后的回调
                    if (!first) { //一定要加此判断，否则初始时会无限刷新
                        var s = location.search.match(/categoryId=(\d+)/);
                        s = s ? "categoryId=" + s[1] + "&" : "";
                        location.href = '?' + s + "pageNum=" + e.curr;
                    }
                }
            });
        });
    </script>
</div>
<th:block th:replace="include/footer:: footer"/>
<script type="text/javascript" th:inline="javascript">
    fzqblog.center = {
        userId: [[${user.userId}]]
    };
    fzqblog.pageTotal = [[${result.page.pageTotal}]]
</script>
<script type="text/javascript" src="/static/webuploader/webuploader.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/laypage/laypage.js"></script>
</body>
</html>